<template>
  <div id="map"></div>
</template>

<script lang="ts">
export default {
  name: "BaiduMap",
};
/*
    1. 注册百度地图API账号，并创建应用得到ak
    2. 准备一个具备宽高的DOM容器
    3. 引入百度地图API的js
*/
</script>

<script lang="ts" setup>
import { onMounted } from "vue";

// 将回调函数添加在window上
window.initialize = () => {
  // 代表百度地图api的js加载完成，可以开始配置地图了
  // 在指定容器上，创建百度地图
  const map = new BMapGL.Map("map");
  // 设置地图中心坐标
  var point = new BMapGL.Point(114.05, 22.5);
  // 地图初始化，同时设置地图展示级别
  map.centerAndZoom(point, 15);

  // 配置项：
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

  // 添加控件:
  // 添加城市列表控件
  var cityCtrl = new BMapGL.CityListControl();
  map.addControl(cityCtrl);
};

// 异步加载：
onMounted(() => {
  var script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=xgEhN4TwdaQhdO1lM7wAZ5ejF5SaT7yD&callback=initialize";
  document.body.appendChild(script);
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 400px;
}
</style>
